<template>
  <div class="header">
    <div class="title flex" @click="goHome">
      <div>{{ title }}</div>
    </div>
    <div class="header-right">
      <div class="block">
        <el-avatar shape="square" size="large" :src="circleUrl"></el-avatar>
      </div>
      <el-dropdown size="primary" @command="handleCommand">
        <span class="el-dropdown-link">
          {{ loginInfo.username
          }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import globalBus from "@/utils/global-bus";
import { title, rightStyles, loginInfo, userInfo } from "@/config";
import { DB } from "@/utils";
const userDetail = new DB("userDetail");
export default {
  data() {
    return {
      title,
      circleUrl: userInfo.photo,
      loginInfo,
    };
  },
  mounted() {
    globalBus.$on("update-user", (data) => {
      this.loginInfo.username = data.name;
      this.circleUrl = data.photo;
    });
    if(userDetail._get(userDetail) && userDetail._get(userDetail).length !=0) {
          this.circleUrl=userDetail._get(userDetail).photo
          this.loginInfo.username=userDetail._get(userDetail).name
      }
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    handleCommand(val) {
      if (val == "a") {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style scoped lang="less">
.header {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-size: 22px;
  font-weight: 700;
  padding-left: 12px;
  padding-right: 12px;
  .title {
    cursor: pointer;
  }
  .header-right {
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #666666;
    .block {
      margin-right: 10px;
    }
  }
}
</style>